<template>
    <div>
    <el-card :body-style="{ padding: '0px' ,'min-height': '300px'}">
        <template v-for="(item,index) in localNewsItem">
            <div  :class="index == 0 ? 'first-item g-border-color' : 'other-item g-flex g-flex-align-between g-border-color'" :key="index" @click="itemClick(index,item)">
                <div class="item-title g-padding15 g-color-normal">{{item.title}}</div>
                <el-image class="item-image ">
                    <div slot="error" class="g-flex g-flex-center g-color-less g-width100 g-height100 g-bg-color-image">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
            </div>
        </template>
    </el-card>
        <el-button class="g-width100"  icon="el-icon-plus" v-if="showAddButton" @click="add"></el-button>
    </div>
</template>

<script>
    export default {
        name: "MpMaterialNewsPreview",
        props:{
            // 媒体id
            mediaId:{
                type: String
            },
            // 参见微信开发文档 news_item
            newsItem:{
                type: Array,
                default:function () {
                    return []
                }
            },
            showAddButton:{
                type: Boolean,
                default: true
            },
            itemClick:{
                type: Function,
                default: function (index, item) {

                }
            }
        },
        data(){
            return {
                localNewsItem: this.newsItem
            }
        },
        methods:{
            add(){
                this.localNewsItem.push({
                    // 图文消息的标题
                    "title":'图文标题' + this.localNewsItem.length,
                    // 图文消息的封面图片素材id（必须是永久mediaID）
                    "thumbMediaId": null,
                    // 是否显示封面，0为false，即不显示，1为true，即显示
                    "showCoverPic": 1,
                    // 作者
                    "author": null,
                    // 图文消息的摘要，仅有单图文消息才有摘要，多图文此处为空
                    "digest": null,
                    // 图文消息的具体内容，支持HTML标签，必须少于2万字符，小于1M，且此处会去除JS
                    "content": null,
                    // 图文页的URL
                    //"url": null,
                    // 图文消息的原文地址，即点击“阅读原文”后的URL
                    "contentSourceUrl": null,
                    // Uint32 是否打开评论，0不打开，1打开
                    "needOpenComment": null,
                    // Uint32 是否粉丝才可评论，0所有人可评论，1粉丝才可评论
                    "onlyFansCanComment": null,
                })
            }
        },
        watch:{
            newsItem(val) {
                this.localNewsItem = val
            },
            localNewsItem(val) {
                this.$emit('newsItemChange',val)
            }
        }
    }
</script>

<style scoped>
    .first-item{
        position: relative;
    }
    .first-item .item-image{
        width: 100%;
        height:80px;
    }
    .first-item .item-title{
        position: absolute;
        width: 100%;
        left: 0px;
        bottom: 0px;
        z-index: 1;
    }
    .other-item .item-image{
        width: 50px;
        height:50px;
    }
</style>